<template>
	<view class="content">
		<u-sticky>
			<view class="header">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#6792DD"></u-tabs>
			</view>
		</u-sticky>
		
		<view class="tuijian">
			<view class="tuijian_con"  v-for="(item, i) in orderlist" :key="i" v-if="orderlist != ''" @click="goDetail(item.order_id)">
				<view class="sec_top">
					<view class="title">
						{{item.statusStr}}
					</view>
				</view>
				<view class="sec_center" v-for="(it,index) in item.goods_list" :key="index">
					<view class="center"><image :src="it.goods_pic"></image></view>
					<view class="right">
						<text class="name">{{it.goods_name}}</text>
						<view class="box_num">
							<view class="box_num_left">
								"<text class="guige" v-for="(arritem,arri) in it.attr_list" :key="arri">{{arritem.attr_name}}</text>"
							</view>
							<text class="number">数量 &nbsp;x{{it.num}}</text>
						</view>
						<view class="box_chima">
							<text></text>
							<text class="price">置换价：￥{{it.price}}</text>
						</view>
					</view>
				</view>
				<view class="sec_footer">
					<view class=""></view>
					<view class="footer_right">
						<view class="back flexs" @click.stop="gosbumit(1,item.order_id)" v-if="item.is_pay==0">
							取消交易
						</view>
						<view class="zhifu flexs" v-if="item.is_pay==0"  @click.stop="gosbumit(2,item.order_id)">
							立即支付
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="emptya flex-column flex-c-c" v-if="orderlist == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->
			<text class="size-32 color-h">暂无数据</text>
		</view>
		<u-modal v-model="quxiaoStatus" content="确定取消交易吗?" :show-cancel-button="true" @confirm="payConfirm_quxiao"></u-modal>
		<u-popup v-model="payshow" mode="center" border-radius="10" :closeable="true">
			<view class="popup">
				<view class="popsec">
					<view class="toptwo" @click="fukuancheck(2)">
						<view class="left">
							<image :src="iconurl + '/static/mall/wx.png'" mode=""></image>
							<text>微信</text>
						</view>
						<image :src="iconurl + '/static/index/pzselect1.png'" v-if="ptype != 1" @click="fukuancheck(1)"></image>
						<image :src="iconurl + '/static/index/pzselect2.png'" v-if="ptype == 1" @click="fukuancheck(1)"></image>
					</view>
					<view class="toptwo" @click="fukuancheck(1)">
						<view class="left">
							<image :src="iconurl + '/static/mall/zfb.png'" mode=""></image>
							<text>支付宝</text>
						</view>
						<image :src="iconurl + '/static/index/pzselect1.png'" v-if="ptype != 2" @click="fukuancheck(2)"></image>
						<image :src="iconurl + '/static/index/pzselect2.png'" v-if="ptype == 2" @click="fukuancheck(2)"></image>
					</view>
				</view>
				<view class="popfoot" @click="opensubmit"><text>确定</text></view>
			</view>
		</u-popup>
		<u-loadmore :status="morestatus" v-if="orderlist!=''" :load-text="loadText"/>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadText: {
				loadmore: '上拉加载更多',
				loading: '正在加载，请喝杯茶',
				nomore: '我是有底线的'
			},
			morestatus:'loadmore',
			ptype:1,
			payshow:false,
			quxiaoStatus:false,
			current: 0,
			list: [
				{
					name: '全部订单'
				},
				{
					name: '待付款'
				},
				{
					name: '进行中'
				},
				{
					name: '已完成'
				}
			],
			orderlist:[],
			page:1,
			iconurl:this.$configs.urls
		};
	},
	onShow() {
		this.getlist()
	},
	onPullDownRefresh() {
		this.page = 1;
		this.orderlist = [];
		this.getlist();
	},
	onReachBottom() {
		this.page++;
		this.morestatus = "loading"
		this.getlist(2);
	},
	methods:{
		fukuancheck(is){
			if(is==1){
				this.ptype = 2;
			}else{
				this.ptype = 1;
			}
		},
		payConfirm_quxiao(){
			let data = {
				order_id:this.order_id,
			}
			this.$Request.get(this.$api.mall.cancel,data).then(res => {
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
			});
		},
		//确定支付
		opensubmit(){
			let data = {
				order_id: this.order_id,
				pay_type:this.ptype
			};
			this.$Request.get(this.$api.mall.payData, data).then(res => {
				let provider = ''
				if(this.ptype==2){
					provider = 'wxpay'
				}else{
					provider = 'alipay'
				}
				////console.log(res)
				//调用支付
				uni.requestPayment({
					provider: provider,
					orderInfo: res.data.pay_data,
					success() {
						uni.showToast({
							title:"支付成功",
							icon:"none"
						})
						setTimeout(()=>{
							this.page = 1;
							this.orderlist = [];
							this.getlist();
						},800)
						 clearTimeout();
					},
					fail(res) {
						////console.log(res);
					}
				});
			});
		},
		gosbumit(is,order_id){
			this.order_id = order_id
			if(is==1){
				//取消交易
				this.quxiaoStatus = true;
			}else{
				//支付
				this.payshow = true;
			}
		},
		getlist(type){
			let data = {
				page:this.page,
				status:this.current,
				type:1
			}
			uni.showLoading({
				title:"加载中..."
			})
			this.$Request.get(this.$api.mall.getList,data).then(res => {
				uni.stopPullDownRefresh()
				uni.hideLoading()
				if(type==2){
					this.orderlist = this.orderlist.concat(res.data.list);
					if(res.data.list==''){
						this.morestatus = "nomore"
					}
				}else{
					this.orderlist = res.data.list;
					this.morestatus = "loadmore"
				}
			});
		},
		goDetail(order_id){
			uni.navigateTo({
				url:"/userPage/user/order/orderDetail?order_id=" + order_id
			})
		},
		change(index) {
			this.current = index;
			this.orderlist = [];
			this.page = 1;
			this.getlist()
		},
	}
};
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #FFFFFF;
		.popup {
			height: 484rpx;
			width: 640rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.delete {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
			.popfoot {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 486rpx;
				height: 80rpx;
				background: #F34A4A;
				opacity: 1;
				border-radius: 40rpx;
				margin-top: 100rpx;
				color: #ffffff;
			}
			.popsec {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 60rpx;
				padding-right: 40rpx;
				padding-left: 60rpx;
				.topone {
					width: 610rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 30rpx;
						position: relative;
						top: 12upx;
					}
					text {
						color: #999999;
						font-size: 34rpx;
					}
				}
				.toptwo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 28rpx;
					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 30rpx;
						position: relative;
						top: 12upx;
					}
					text {
						color: #999999;
						font-size: 34rpx;
					}
				}
			}
		}
		.tuijian {
			background: #ffffff;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			position: relative;
			.sec_footer{
				display: flex;
				justify-content: space-between;
				.footer_right{
					display: flex;
					align-items: center;
					.back{
						width: 163rpx;
						height: 54rpx;
						background: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 100rpx;
					}
					.zhifu{
						width: 163rpx;
						height: 54rpx;
						background: #F34A4A;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 100rpx;
						margin-left: 50rpx;
					}
				}
				
			}
			.sec_right{
				position: absolute;
				right: 40rpx;
				top: 40rpx;
				text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #000000;
				}
			}
			.sec_bottom {
				.view_title{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				.bom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 22rpx;
					.left {
						display: flex;
						align-items: center;
						text:nth-child(1) {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							max-width: 240rpx;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
					.right {
						font-size: 29rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #ffffff;
						text-align: center;
						line-height: 24rpx;
						background: #fd8e1b;
						border-radius: 10rpx;
						padding: 8rpx 26rpx 8rpx 26rpx;
					}
				}
			}
			.tuijian_con {
				width: 710rpx;
				margin: 0 auto;
				padding: 20rpx;
				background-size: 100% 100% !important;
				background-repeat: no-repeat !important;
				margin-bottom: 10rpx;
				border-radius: 20rpx;
				box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.16);
				.sec_top{
					.title{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
				.sec_center {
					width: 710rpx;
					margin: 0 auto;
					display: flex;
					position: relative;
					.center {
						padding: 10rpx 0 10rpx 0;
						image {
							width: 218rpx;
							height: 220rpx;
							border-radius: 10rpx;
						}
					}
					.right {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						padding: 0 20rpx 0 0;
						box-sizing: border-box;
						min-width: 400rpx;
						.box_chima{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 10rpx;
							.guige{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
							}
							.price{
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FF0000;
							}
						}
						.box_num{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 28rpx;
							.box_num_left{
								display: flex;
								flex-wrap: wrap;
								.guige{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #333333;
								}
							}
							
							.number{
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333333;
							}
						}
						.name {
							max-width: 340rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							margin-top: 6rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: justify;
							overflow: hidden;
							margin-top: 40rpx;
						}
						.cont {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #E80303;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: justify;
							overflow: hidden;
							padding-right: 20rpx;
							box-sizing: border-box;
						}
						.bom {
							min-width: 320rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 2rpx;
							.left {
								display: flex;
								align-items: center;
								text:nth-child(1) {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #000000;
								}
							}
							.right {
								font-size: 29rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #ffffff;
								text-align: center;
								line-height: 24rpx;
								background: #fd8e1b;
								border-radius: 10rpx;
								padding: 16rpx 26rpx 16rpx 26rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
